<template>
  <div id="app" :class="{'flex-col vh100': isWx}">
    <!--<img src="./assets/logo.png">-->
    <div class="download-header flex" v-if="isWx && !$route.meta.noHeaderDownload" v-show="showHeader">
      <div class="left flex-1 flex aic">
        <img src="./images/pop_ico_close.png" alt="" class="mr10 vam close" @click="showHeader = false">
        <img :src="appObj.icon" alt="" class="logo vam">
        <div class="text-box flex-1">
          <div class="name">{{appObj.name}}</div>
          <div class="desc">{{appObj.sortDesc}}</div>
        </div>
      </div>
      <a class="right flex jcc aic" :href="appObj.apkLink || appObj.link">立即下载</a>
    </div>
    <div class="flex-1 ova">
      <router-view :showHeader="showHeader"/>
    </div>
    <div class="tabs flex jca" v-if="isWx && needFooter">
      <div class="tab flex-col jcb aic" :class="(activeTab === tab.id) + ''" v-for="(tab, i) in tabs" :key="i"
           @click="tabChange(tab, i)">
        <img :src="activeTab === tab.id ? tab.act : tab.src" :style="{width: tab.w + 'rem', height: tab.h + 'rem'}"
             class="tab-img vam"/>
        <div class="tab-text">{{tab.name}}</div>
      </div>
    </div>
    <div class="pof go-home flex-col jcc aic" v-else-if="(isWx || !isXxtb) && !$route.meta.noGoHome"
         @click="$router.push('/')"
         ref="goHome"
         @touchmove.prevent="moveGo"
         :style="{transform}"
         @touchstart="readyMove">
      <img src="./images/go_home_03.png" alt="" class="go-home-ico vam"/>
      <div class="go-home-text">首页</div>
    </div>
  </div>
</template>

<script>
  import { mapGetters, mapMutations } from 'vuex';
  import { isXxtb } from '@/config/config';

  export default {
    name: 'App',
    computed: {
      ...mapGetters(['isWx', 'activeTab', 'appList', 'userInfo', 'wxUserInfo']),
      needFooter() {
        return ['IndexPage', 'TbCourseList', 'Mine'].includes(this.$route.name);
      }
    },
    data() {
      return {
        showHeader: true,
        isXxtb,
        transform: '',
        tabs: [
          {
            id: 1,
            url: '/',
            name: '首页',
            src: require('@/images/tab_nor_home.png'),
            act: require('@/images/tab_act_home.png'),
            w: 1.28,
            h: 1.35
          },
          {
            id: 2,
            url: 'TbCourseList',
            name: '同步课程',
            src: require('@/images/tab_nor_course.png'),
            act: require('@/images/tab_act_course.png'),
            w: 1.38,
            h: 1.19
          },
          {
            id: 3,
            url: '/mine',
            name: '我的',
            src: require('@/images/tab_nor_mine.png'),
            act: require('@/images/tab_act_mine.png'),
            w: 1.16,
            h: 1.25
          }
        ],
        appObj: {},
        ready: null,
        goHome: null
      };
    },
    created() {
      this.util.autoUpdateLocal();
      this.appObj = this.appList[1].list.find(e => e.pid === 1);
    },
    methods: {
      ...mapMutations(['setActiveTab', 'setLoginThenPath']),
      tabChange(item, i) {
        if (this.activeTab !== i + 1) {
          // change route
          this.$router.push(item.url);
        }
      },
      readyMove(e) {
        if (!this.ready) {
          this.ready = e.targetTouches[0];
          this.goHome = this.$refs.goHome;
        }
      },
      moveGo(e) {
        let { ready: { pageX: x, pageY: y }, goHome: { offsetTop, offsetLeft } } = this;
        let { pageX, pageY } = e.targetTouches[0];
        let rx = pageX - x;
        let ry = pageY - y;
        rx = rx > 20 ? 20 : rx < -offsetLeft ? -offsetLeft : rx;
        ry = ry > 30 ? 30 : ry < -offsetTop ? -offsetTop : ry;
        this.transform = `translate(${rx}px, ${ry}px)`;
      }
    },
    mounted() {
      setTimeout(() => {
        this.setLoginThenPath('');
      }, 1000);
      if (!this.userInfo.uid && this.wxUserInfo.openid) {
        this.util.login();
      }
    }
  };
</script>

<style lang="less" scoped>
  .download-header {
    .left {
      padding: .5rem .54rem;
      background-color: #4e4a5e;
      .close {
        width: .8rem;
        height: .8rem;
      }
      .logo {
        margin-right: .63rem;
        width: 2.75rem;
        height: 2.75rem;
      }
      .text-box {
        line-height: 1;
        font-size: .94rem;
        color: #fff;
      }
      .desc {
        margin-top: .66rem;
        font-size: .69rem;
        opacity: .6;
      }
    }
    .right {
      width: 5.63rem;
      color: #fff;
      background-color: #f87279;
      text-decoration: none;
    }
  }

  .tabs {
    padding: .59rem 0 .25rem;
    font-size: .63rem;
    color: #8c8899;
    background-color: #fff;
    box-shadow: inset 0 .03rem 0 0 rgba(0, 0, 0, .08);
    .true {
      color: #4e4a5e;
    }
  }

  .go-home {
    right: 1.25rem;
    bottom: 1.88rem;
    width: 3.06rem;
    height: 3.06rem;
    z-index: 1000;
    background-color: #14c5fa;
    box-shadow: 0 .16rem .38rem 0 rgba(20, 197, 250, .36);
    border-radius: 50%;
    color: #fff;
    font-size: .69rem;
    line-height: 1;
    &-ico {
      margin-bottom: .22rem;
      width: 1.25rem;
      height: 1.25rem;
    }
  }

</style>
